<template>
  <div class="boxcard">
    <el-row>
      <el-col :span="20">
        <span class="text">Buttons</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" :md="{ span: 12 }">
        <div class="button">
          <div class="buttontext">
            Circle Buttons
          </div>
          <p>Use Font Awesome Icons (included with this theme package) along with the circle buttons as shown in the
            examples
            below!</p>
          <div class="btn-circle">.btn-circle
            <el-row style="margin-top:8px ;">
              <el-button class="mbutton" circle @click="goTop">f</el-button>
              <el-button class="mbutton rightbutton" circle @click="goTop"> √</el-button>
              <el-button type="success" class="mbutton buttonthree" circle @click="goTop">i</el-button>
              <el-button type="info" icon="el-icon-warning" class="mbutton buttonfour" circle @click="goTop">
              </el-button>
              <el-button type="warning" class="mbutton buttonfive" icon="el-icon-delete" circle @click="goTop">
              </el-button>
            </el-row>
          </div>
          <div class="btn-circle" style="margin-top:20px ;">.btn-circle .btn-sm
            <el-row style="margin-top:8px ;">
              <el-button class="sbutton" circle @click="goTop">f</el-button>
              <el-button class="sbutton rightbutton" circle @click="goTop">√</el-button>
              <el-button type="success" class="sbutton buttonthree" circle @click="goTop">i</el-button>
              <el-button type="info" icon="el-icon-warning" size="mini" class=" buttonfour" circle @click="goTop">
              </el-button>
              <el-button type="warning" class=" buttonfive" size="mini" icon="el-icon-delete" circle @click="goTop">
              </el-button>
            </el-row>
          </div>
          <div class="btn-circle" style="margin-top:20px ;">.btn-circle .btn-lg
            <el-row style="margin-top:8px ;">
              <el-button class="lbutton" circle @click="goTop">f</el-button>
              <el-button class="lbutton rightbutton" circle @click="goTop">√</el-button>
              <el-button type="success" class="lbutton buttonthree" circle @click="goTop">i</el-button>
              <el-button type="info" icon="el-icon-warning" size="mini" class="lbutton buttonfour" @click="goTop"
                circle></el-button>
              <el-button type="warning" class="lbutton buttonfive" size="mini" icon="el-icon-delete" @click="goTop"
                circle></el-button>
            </el-row>
          </div>
        </div>
        <div class="button m_height">
          <div class="buttontext">
            Brand Buttons
          </div>
          <p>Google and Facebook buttons are available featuring each company's respective brand color. They are used on
            the user login and registration pages.</p>
          <p>
            You can create more custom buttons by adding a new color variable in the<span
              class="ptext">_variables.scss</span> file and then using
            the Bootstrap button variant mixin to create a new style, as demonstrated in the <span
              class="ptext">_buttons.scss</span> file.
          </p>
          <div class="Brand" @click="goTop">
            <span class="Brandtext">G</span>
            .btn-google
          </div>
          <div class="Brand f_brand" @click="goTop">
            <span class="Brandtext">F</span>
            .btn-facebook
          </div>
        </div>
      </el-col>
      <el-col :span="24" :md="{ span: 12 }">
        <div class="button lager_height">
          <div class="buttontext">
            Split Buttons with Icon
          </div>
          <p>Works with any button colors, just use the <span class="ptext ">.btn-icon-split</span> class and the markup
            in the examples below. The
            examples below also use the <span class="ptext">.text-white-50</span> helper class on the icons for
            additional styling, but it is not
            required.</p>
          <div>
            <div class="rectangle" @click="goTop">
              <i class="el-icon-s-flag " style="margin-top:10px ;"></i>
              <el-button class="rectangle_button">
                Split Button Primary</el-button>
            </div>
            <div class="rectangle b_rightbutton">
              <i class="el-icon-check" style="margin-top:10px ;"></i>
              <el-button @click="goTop" class="rectangle_button rightbutton sbox"> Split Button Info
              </el-button>
            </div>
            <div class="rectangle b_buttonthree">
              <i class="el-icon-info" style="margin-top:10px ;"></i>
              <el-button type="success" @click="goTop" class="rectangle_button buttonthree">Split Button Info
              </el-button>
            </div>
            <div class="rectangle b_buttonfour">
              <i class="el-icon-warning" style="margin-top:10px ;"></i>
              <el-button type="info" class="rectangle_button buttonfour lbox" @click="goTop">Split Button
                Warning
              </el-button>
            </div>
            <div class="rectangle b_buttonfive">
              <i class="el-icon-delete" style="margin-top:10px ;"></i>
              <el-button type="warning" class="rectangle_button buttonfive" @click="goTop">Split Button
                Danger
              </el-button>
            </div>
            <div class="rectangle b_buttonsix">
              <i class="el-icon-right" style="margin-top:10px ;"></i>
              <el-button type="warning" class="rectangle_button buttonsix lbox" @click="goTop">Split Button Secondary
              </el-button>
            </div>
            <div class="rectangle b_buttonseve">
              <i class="el-icon-right" style="margin-top:10px ;"></i>
              <el-button type="warning" class="rectangle_button buttonseve " @click="goTop">Split Button Light
              </el-button>
            </div>
          </div>
          <p>Also works with small and large button classes!</p>
          <div class="rectangle sbox_out" @click="goTop">
            <i class="el-icon-s-flag " style="margin-top:8px ;"></i>
            <el-button class="rectangle_button sbox_in">
              Split Button Small</el-button>
          </div>
          <div class="rectangle lbox_out" @click="goTop">
            <i class="el-icon-s-flag bigicon"></i>
            <el-button class="rectangle_button lbox_in">
              Split Button Large</el-button>
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { gotop, handleScroll } from "../../utils/gotop"
export default {
  name: 'buttons',
  data() {
    return {
      scrollTop: "",
    };
  },
  methods: {
    handleScroll() {
      this.scrollTop = handleScroll()
    },
    goTop() {
      gotop(this.scrollTop)
      this.show_card = false;
      this.goTopshow = false
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<style scoped lang="less">
@import '../../assets/less/common.less';


.button {
  width: 95%;
  height: 480px;
  margin-left: 20px;
  box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
  border-radius: 5px;
  margin-top: 20px;
}

.buttontext {
  height: 20px;
  color: rgb(78, 115, 223);
  font-size: 16px;
  font-weight: 600;
  line-height: 19.2px;
  background-color: rgb(248, 249, 252);
  padding: 15px;
  border-bottom: 1px solid rgba(207, 207, 207, 0.4);
}

p {
  padding: 0 15px;
  color: rgb(136, 139, 157);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  text-decoration: none
}

.btn-circle {
  color: rgb(232, 62, 140);
  font-family: SFMono-Regular;
  font-size: 14px;
  font-weight: 400;
  margin-left: 20px;
}

.ptext {
  color: rgb(232, 62, 140);
  font-family: SFMono-Regular;
  font-size: 14px;
  font-weight: 400;
}

.mbutton {
  color: #fff;
  background-color: #2e59d9;
  border-color: #2653d4;
  font-family: "Font Awesome 5 Brands";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  // border: 3px solid #7f94ce;
  border-radius: 50%;
  height: 41px;
  width: 40px;
  align-items: center;
  text-align: center
}

.sbutton {
  color: #fff;
  background-color: #2e59d9;
  border-color: #2653d4;
  font-family: "Font Awesome 5 Brands";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 0px;
  // border: 3px solid #7f94ce;
  border-radius: 50%;
  height: 28px;
  width: 27.3px;
  align-items: center;
  text-align: center
}

.lbutton {
  color: #fff;
  background-color: #2e59d9;
  border-color: #2653d4;
  font-family: "Font Awesome 5 Brands";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 0px;
  // border: 3px solid #7f94ce;
  border-radius: 50%;
  height: 56px;
  width: 56px;
  align-items: center;
  text-align: center
}

.rectangle {
  margin-left: 20px;
  margin-top: 20px;
  color: #fff;
  background-color: #2445aa;
  border-color: #2653d4;
  font-size: 16px;
  font-weight: 390;
  line-height: 14px;
  border-radius: 5px;
  // border: 3px solid #7f94ce;
  height: 37px;
  text-align: center;
  width: 220px;
}

.rectangle_button {
  color: #fff;
  background-color: #2e59d9;
  border-color: #2653d4;
  font-size: 16px;
  font-weight: 390;
  line-height: 14px;
  // border: 3px solid #7f94ce;
  height: 37px;
  border-radius: 5px;
  width: 180px;
  float: right;
}

.rightbutton {
  background-color: rgb(64, 207, 157);
  border-color: rgb(64, 207, 157);
}

.buttonthree {
  background-color: rgb(32, 188, 209);
  border-color: rgb(32, 188, 209);
}

.buttonfour {
  background-color: rgb(235, 181, 99);
  border-color: rgb(235, 181, 99);
}

.buttonfive {
  background-color: rgb(224, 45, 27);
  border-color: rgb(224, 45, 27);
}

.buttonsix {
  background-color: rgb(133, 135, 150);
  border-color: rgb(133, 135, 150);
}

.buttonseve {
  background-color: rgb(255, 255, 255);
  color: rgb(133, 135, 150);
  border-color: rgb(255, 255, 255);
}

.b_rightbutton {
  background-color: rgb(49, 150, 115);
  border-color: rgb(49, 150, 115);
  width: 190px;
}

.b_buttonthree {
  background-color: rgb(27, 154, 171);
  border-color: rgb(27, 154, 171);
}

.b_buttonfour {
  background-color: rgb(199, 154, 86);
  border-color: rgb(199, 154, 86);
  width: 240px;
}

.b_buttonfive {
  background-color: rgb(168, 34, 22);
  border-color: rgb(224, 45, 27);
}

.b_buttonsix {
  background-color: rgb(98, 99, 111);
  border-color: rgb(98, 99, 111);
  width: 240px;
}

.b_buttonseve {
  background-color: rgb(194, 192, 192);
  border-color: rgb(255, 255, 255);
  color: rgb(133, 135, 150);
}

.sbox {
  width: 150px;
}

.sbox_out {
  width: 160px;
  height: 30px;

}

.sbox_in {
  width: 130px;
  height: 30px;
  font-size: 13px;
  line-height: 7px;
  padding: 5px !important;
}

.lbox {
  width: 200px;
}

.lager_height {
  height: 750px;
  margin-top: 20px;
}

.lbox_out {
  width: 250px;
  height: 47px;

}

.lbox_in {
  width: 200px;
  height: 47px;
  font-size: 20px;
  line-height: 20px;
  padding: 5px !important;
}

.Brand {
  width: 430px;
  height: 47px;
  margin-left: 20px;
  background-color: rgb(225, 39, 23);
  border-radius: 5px;
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 410;
  line-height: 40px;

}

.Brandtext {
  font-size: 20px;
  font-weight: 550;
}

.f_brand {
  background-color: #30497c;
}

.m_height {
  height: 400px;
  margin-top: 20px;
}

.bigicon {
  margin-top: 12px;
  font-size: 30px;
}
</style>